<template>
    <div class="evaluation">
        <van-nav-bar
                title="评价"
                @click-left="onClickLeft"
        >
            <template #left><van-icon name="cross" size="16"/></template>
        </van-nav-bar>
        <div class="evaluation-content">
            <div class="evaluation-food" v-if="foods.length">
                <van-image
                        height="4rem"
                        fit="contain"
                        :src="`http://localhost:8080/res/${foods[index].food.food_img}`"
                />
                <h3 style="font-weight: normal;margin: 5px">当前评价菜品：{{foods[index].food_name}}</h3>
                <h4 style="font-weight: normal;margin: 5px">满意程度</h4>
                <div class="evaluation-gob">
                    <van-button round :type=type_1 icon="smile-o" style="margin-right: 20px" @click="()=>gob(1)">不满意</van-button>
                    <van-button round :type=type_2 icon="smile-o" @click="()=>gob(2)">
                        满意<span style="visibility: hidden">空</span></van-button>
                </div>

                <div class="evaluation-rate">
                    口味<span style="visibility: hidden">空格</span><van-rate v-model="value_1" />
                </div>
                <div class="evaluation-rate">
                    满意<span style="visibility: hidden">空格</span><van-rate v-model="value_2" />
                </div>
                <div>
                    <van-field v-model="comment" class="comment" type="textarea" placeholder="说点什么吧"></van-field>
                </div>
                <div class="evaluation-upload">
                    <van-uploader v-model="fileList" multiple :max-count="1"
                                  @oversize="$toast('文件大小不能超过一兆')" :max-size="1024 * 1024"/>
                    <p>精美图片有几率成为优质评价</p>
                </div>

            </div>
            <div class="evaluation-choose" >
                <van-tag v-for="(cur,index) in foods"
                         plain closeable :key="cur.order_detail_id" type="primary" size="large"
                         @click="changeEvaluation(index)" @close="close(index)">{{cur.food_name}}</van-tag>
            </div>
            <div class="evaluation-commit">
                <van-button type="warning" round @click="addEvaluation">提交评论</van-button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Evalution",
        data(){
            return {
                comment:'',
                type_1:'default',
                type_2:'default',
                radio:'1',
                fileList:[],
                value_1:5,
                value_2:5,
                activeIcon: 'good-job-o',
                inactiveIcon: 'warn-o',
                index:0,
                foods:[],
            }
        },
		
        created() {
            this.order=this.$route.params.order;
			let goodorder =  this.order
            goodorder.status=18;
			console.log(this.order)
            this.axios.post(this.GLOBAL.orderStatusChange,goodorder).then(res=>{
                console.log(res.data);
            });
            this.axios.get(`${this.GLOBAL.foodsInOrder}/${this.order.order_id}`).then(res=>{
                console.log(res.data);
                this.foods=res.data.usergoodorderlist;
            });
        },
        methods:{
            onClickLeft(){
                this.$router.replace('/order');
            },
            changeEvaluation(index){
                this.index=index;
            },
            close(index){
                if(index==this.index){
                    this.foods.splice(index,1);
                    this.index=0;
                }else{
                    this.foods.splice(index,1);
                }
                if(!this.foods.length){
                    this.$router.replace('/order');
                }
            },
            gob(param){
                if(param==1){
                    this.type_1=this.type_1=='default'?'warning':'default';
                    this.type_2="default";
                }else if(param==2){
                    this.type_2=this.type_2=='default'?'warning':'default';
                    this.type_1="default";
                }
            },
            addEvaluation(){
                if(!this.comment){
                    this.$toast.fail('提交评价需至少填写评价内容');
                }else{
                    let formData=new FormData();
                    formData.append("food_id",this.foods[this.index].food_id);
                    formData.append("evaluation_content",this.comment);
                    formData.append("evaluation_lv",this.value_2);
                    if(this.fileList[0]){
                        formData.append('file', this.fileList[0].file);
                    }
                    this.axios.post(this.GLOBAL.exAddEvaluation,formData).then(res=>{
                        console.log(res.data);
                    });
                    this.foods.splice(this.index,1);
                    if(!this.foods.length){
                        this.$router.replace('/order');
                    }
                    this.index=0;
                    this.$notify({type: 'success',message:'评价成功'});
                }
            },
        }
    }
</script>

<style scoped lang="less">
    @import "../../main.less";
    .evaluation-content{
        overflow: auto;
        width: 90%;
        margin: 0 auto;
        text-align: center;
        white-space:pre;
        .evaluation-food{
            border-radius: 12px;
            background-color: white;
            padding: 8px;
            div{
                margin-bottom: 6px;
            }
            .evaluation-rate{
                pre{
                    display: inline-block;
                    margin: 0;
                    font-size: 20px;
                    line-height: 20px;
                }
                .van-rate{
                    margin-bottom: 0;
                    vertical-align: text-bottom;
                }
            }
            .comment{
                background-color: #f4f4f4;
            }
            .evaluation-upload{
                position: relative;
                text-align: left;
                p{
                    position: absolute;
                    top: 30%;
                    left: 30%;
                    .tips;
                }
            }
            .evaluation-upload{
                margin-bottom: 0;
                padding: 3px;
            }
        }
        .evaluation-choose{
            display: flex;
            flex-wrap: wrap;
            .van-tag{
                margin: 5px;
            }
        }
        .evaluation-commit{
            position: absolute;
            bottom: 5%;
            left: 50%;
            transform: translateX(-50%);
        }
    }
</style>